<template>
	<view class="flex-col page">

		<view class="flex-col group" style="flex-shrink:0;">
			<view class="justify-center group_1" style="flex-shrink:0;">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844615651288038.png"
					class="image_1" />
				<text
					class="text">{{ status == 0 ? '等待买家付款' : status == 1 ? '等待达人确认' : status == 2 ? '达人已确认并出发'  : status == 3 ? '达人已出发' : status == 4 ? '达人到达目的地': status == 5 ? '服务进行中' : status == 6 ? '已完成订单' : status == 7 ? '已评价订单' : '已取消订单' }}</text>
			</view>
			<view class="" style="font-size: 28rpx; text-align: center;color: #fff;" v-if="cancel_reason">
				达人取消原因：{{cancel_reason}}
			</view>
			<!-- <text class="text_1" v-if="end_t !=='已过期'">剩{{ end_t }}自动关闭</text>
			<text class="text_1" v-if="end_t =='已过期'">已过期</text> -->
		</view>
	
		

		<view class="flex-col group_7" style="flex-shrink:0;">
		
			<view class="flex-col section_4" style="flex-shrink:0;">
				<view class="flex-col" style="flex-shrink:0;">
				<!-- 	<view style="font-size: 28rpx;padding-bottom: 16rpx;">
						达人服务码：<span style="color: red;font-size: 36rpx;">{{confirm_code}}</span>
					</view> -->
					<view class="flex-row group_10">
						<view class="section_5"> </view>
						<text class="text_12">服务项目</text>
					</view>
					<view class="flex-row group_11" style="flex-shrink:0;" v-for="(item,index) in services"
						:key="index">
						<view class="flex-col section_6" :style="{'backgroundImage': `url(${item.master_image})`}">
							<view class="flex-col text-wrapper_3" v-if="false">
								<text class="text_13">缓解疲劳·激活能量</text>
							</view>
						</view>
						<view class="flex-col group_12">
							<text class="text_14">{{ item.name }}</text>
							<view class="group_13">
								<text class="text_15">￥</text>
								<text class="text_16">{{ item.price }}</text>
							</view>
							<view class="center-group flex-row view_6">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844603803770493.png"
									class="image_4" />
								<text class="text_17">时长{{ item.duration*60 }}分钟</text>
							</view>
							<text class="text_18">×{{ item.number }}</text>
						</view>
					</view>
				</view>
				<view class="flex-col group_14">
					<view class="justify-between">
						<text class="text_19">出行交通费用</text>
						<text class="text_20">￥{{ fare_money }}</text>
					</view>
					<view class="justify-between group_16">
						<text class="text_21">优惠券</text>
						<text class="text_22">-￥{{ coupon_price }}</text>
					</view>
				</view>
				<view class="flex-col group_17">
					<view class="divider"> </view>
					<view class="group_18 justify-between">
						<view class="flex-row">
							<image :src="technician.avatar" class="image_5" />
							<view class="flex-col group_20">
								<view class="flex-row">
									<text class="text_23">{{ technician.nickname }}</text>
									<view class="flex-col items-end group_22">
										<view class="flex-col items-center text-wrapper_4">
											<text>认证</text>
										</view>
										<image
											src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844795953096993.png"
											class="image_6" />
									</view>
								</view>
								<view class="flex-row group_23">
									<!--  -->
									<u-icon v-for="(sitem,sindex) in parseInt(praise)" :key="sindex" name="star-fill"
										size="12" color="rgba(243, 151, 53, 1)"></u-icon>

									<text class="text_25">好评{{ technician.grade }}分</text>
								</view>
							</view>
						</view>
						<view v-if='status==2||status==3||status==4||status==5'
							class="flex-col items-center text-wrapper_5" @click="call">
							<text>联系达人</text>
						</view>
					</view>
					<view class="divider"> </view>
				</view>
				<!-- <view class="group_18 flex-col">
					<view class="flex-row">
						<text class="text_27">{{ user_realname }}</text>
						<text class="text_28">{{ user_mobile }}</text>
					</view>
					<text class="text_29">{{ province }}{{ city }}{{ district }}{{ address }}</text>
				</view> -->
				<view class="flex-col">
					<view class="divider"> </view>
					<view class="group_18 flex-col">
						<view class="justify-between">
							<text class="text_30">实付款(含车费)</text>
							<view class="group_27">
								<text class="text_31">￥</text>
								<text class="text_32">{{ should_pay_money }}</text>
							</view>
						</view>
						<view class="justify-between group_28">
							<text class="text_33">商品总额</text>
							<text class="text_34">￥{{ should_pay_money-fare_money }}</text>
						</view>
						<view class="justify-between group_29">
							<text class="text_35">车费</text>
							<text class="text_36">￥{{ fare_money }}</text>
						</view>
					</view>
				</view>
				<view class="flex-col">
					<view class="divider"> </view>
					<view class="group_18 flex-col">
						<view class="justify-between">
							<text class="text_30">订单信息</text>

						</view>
						<view class="justify-between group_28">
							<text class="text_33">订单编号</text>
							<text class="text_34">{{ order_sn }}</text>
						</view>
						<view class="justify-between group_29">
							<text class="text_35">下单时间</text>
							<text class="text_36">{{ place_order_time }}</text>
						</view>
					</view>
				</view>
				<view class="divider"> </view>
				<!-- <view class="flex-col group_30">
					<text class="text_37">下单须知</text>
					<text
						class="text_38">1.用户付款下单后。30分钟内达人确认是否接单。<br /><br />2.达人确认接单以后。如没有按照时间约定，提供达人服务，用户可以联系客户申请全额退款。<br /><br />3.达人确认接单以后。达人未在事先取得用户同意的情况下，超过两小时没有提供服务，均视为达人爽约。用户可联系平台客服，退还全额本金。同时赠送价值30元优惠券。<br /></text>
				</view>
				<text class="text_39">按时服务 | 质量保证 | 服务专业 | 条件退款</text>
				<view class="flex-col items-center text-wrapper_6" @click="calltel">
					<text>联系客服</text>
				</view> -->
			</view>
		</view>

		<u-popup :show="show2" @close="show2=false" :round="15" mode="bottom">
			<view class="jm-box">
				<view class="" style="font-size: 28rpx; margin: 20rpx auto; text-align: center;">
					支付：￥<text style="font-size: 50rpx;color: #f39735;">{{renewM}}</text>
				</view>
				<view class="" style="display: flex; font-size: 28rpx; padding:20rpx 40rpx;">
					续费时长<input focus style="flex: 1; font-size: 28rpx;text-align: right;padding: 0 10rpx;" type="digit"
						placeholder="请输入时长" v-model="renewDuration" />小时
				</view>
				<u-radio-group v-model="payType" placement="column" style="display: block;">
					<view class="justify-between section_10" :class="!index ? 'section_9': ''"
						v-for="(item,index) in payList" :key="index" style="flex-shrink:0;">
						<view class="flex-row" style="flex-shrink:0;">
							<image v-if="index === 0" src="/static/confirm_order/5.png" mode="" class="image_0">
							</image>
							<image v-if="item.name == '微信支付'" src="/static/confirm_order/6.png" mode="" class="image_0">
							</image>
							<image v-if="item.name == '支付宝'" src="/static/confirm_order/7.png" mode="" class="image_0">
							</image>

							<text class="margin_left">{{ item.name }}</text>
						</view>
						<u-radio active-color="#8538FC" :customStyle="{marginBottom: '8px'}" :key="index"
							:name="item.name">
						</u-radio>
					</view>
				</u-radio-group>
				<!-- <view @click="payment" style="width: 590rpx;margin: 20rpx auto;" class="bottomButton flex-row-center">
					支付
				</view> -->
			</view>
		</u-popup>

	<!-- 	<zPay ref="pay" :money="should_pay_money" :orderId="order_sn" :tephone='tephone' :balance="balance" @pay="pay">
		</zPay> -->
	</view>
</template>

<script>
	// import zPay from '@/components/z-pay/index.vue';
	// import {
	// 	pay
	// } from '@/config/utils'
	export default {
		data() {
			return {
				teps: 1, //步骤
				order_sn: '',
				"id": 12,
				"should_pay_money": "",
				"status": 0,
				"appointment_time": "",
				"fare_money": "",
				"coupon_price": "",
				"refund": null,
				"should_pay_money": "",
				"place_order_time": "",
				"name": "",
				"duration": 60,
				"cover": "",
				"nickname": "",
				"realname": "",
				"praise": 0,
				"avatar": "",
				"end_t": '',
				'service_id': '',
				'spec_id': '',
				'technician_id': '',
				'technician': '',
				'services': '',
				balance: 0,
				technician_mobile: "18884614916",
				mobiles: '18884614916',
				tephone: '',
				confirm_code: '', //确认码
				start_service_time: 0, //开始时间
				cancel_reason: '',
				show2: false,
				payList: [{
						name: '余额'
					},
					// #ifndef APP
					{
						name: "微信支付"
					}
					// #endif
					// #ifdef APP
					{
						name: "支付宝"
					}
					// #endif
				],
				payType: "微信支付",
				renewDuration: '',
				renewM: 0,
			};
		},
		onLoad(options) {
			let {
				order_sn
			} = options;
			this.order_sn = order_sn;
			this.init();

		},
		watch: {
			renewDuration(val) {
				console.log(val);
				this.renewM = this.services[0].price / this.services[0].duration * val
			}
		},
		
		methods: {
			async payment() { //续单
				if (this.renewDuration == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入时长'
					})
					return
				}
				let pay_type = ''
				// #ifdef APP
				this.payType == '支付宝' ? pay_type = 'app支付宝' : pay_type = '余额'
				// #endif
				// #ifndef APP

				this.payType == '微信支付' ? pay_type = 'h5微信' : pay_type = '余额'
				// #endif
				this.$http.post('api/reorder/order', {
					order_id: this.order_id, //订单id
					pay_type, //支付方式
					hour: this.renewDuration //续单时长
				}).then(res => {
					console.log(res);
					if (this.payType == '微信支付') {
						pay(res.pay_data).then(res1 => {
							console.log(res1, 'res打印的res ')
							uni.showToast({
								title: res1,
								icon: 'success'
							})
						}).catch(err => {
							console.log(err);
						});
					} else if (this.paytype == '支付宝') {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res, //支付宝订单数据
							success: function(res2) {
								console.log(res2, 'res打印的res ')
								uni.showToast({
									title: res2,
									icon: 'success'
								})

							},
							fail: function(err) {
								uni.showToast({
									icon: 'none',
									title: '支付失败'
								});

							}
						});
					} else {
						uni.showToast({
							title: '续单成功',
							icon: 'success'
						})
					}
					this.init()
					this.show2 = false
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err.errMsg,
						icon: 'none'
					})
				})


			},
			async init() {
				// 获取客服信息 api/user/customerService
				
				let res = await this.$u.api.ad({
						id: 18
				
				});
				this.mobiles = res.value;
				
				// 获取余额
				// this.$http.post('api/user/userInfo').then(res => {
				// 	this.balance = res.balance;
				// })
				let data = await this.$u.api.detail({
						order_sn: this.order_sn
				
				});
				
				console.log(data, 'xxx----------x')
				this.tephone = data.data.technician.phone
				for (let i in data.data) {
					this[i] =  data.data[i];
				}
				this.cancel_reason = data.cancel_reason
				this.confirm_code = data.confirm_code
				this.start_service_time = data.start_service_time
				this.order_id = data.id
				this.teps = this.order_status == 0 ? 1 : this.order_status == 1 ? 2 : this.order_status == 2 ? 3 : this
					.order_status == 3 ? 5 : 6;
				this.end_t = this.showtime(this.appointment_time);
				let timer = null;
				if (this.end_t !== '已过期') {
					timer = setInterval(() => {
						if (this.end_t === '已过期') {
							clearInterval(timer);
							return;
						}
						this.end_t = this.showtime(this.appointment_time)
					}, 1000)
				}
			},
			call() {
				// if( this.technician_mobile ){
				uni.makePhoneCall({
					phoneNumber: this.technician.phone
				});
				return;
				// }
				// uni.showToast({
				// 	icon:'none',
				// 	title:'该达人暂无号码'
				// })
			},
			calltel() {
				if (this.mobiles) {
					uni.showModal({
						content: '是否拨打客服电话',
						success: (res) => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: this.mobiles
								});
							}
						}
					})
					return;
				}
				uni.showToast({
					icon: 'none',
					title: '暂无客服联系号码'
				})
			},
			add0(a) {
				a = Number(a)
				return a < 10 ? '0' + a : a;
			},
			showtime(endtime) {
				var nowtime = new Date(), //获取当前时间
					endtime = new Date(endtime.replace(/-/g, '/')); //定义结束时间
				var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60); //计算秒数
				if (lefttime <= 0) {
					return '已过期'
				}
				return this.add0(leftd) + "天" + this.add0(lefth) + ":" + this.add0(leftm) + ":" + this.add0(
					lefts); //返回倒计时的字符串
			},
			goXuzhong() {
				let order_info = {
					spec_id: '',
					service_id: '',
					technician_id: ''
				}
				order_info.spec_id = this.spec_id;
				order_info.service_id = this.service_id;
				order_info.technician_id = this.technician_id;
				console.log(order_info, "errors")
				uni.setStorageSync('order_info', order_info);
				uni.navigateTo({
					url: '/pages/confirm_order/confirm_order'
					// url: '/pages/confirm_order/confirm_order?xuzhong=' + 1
				})
			},
			hide() {
				uni.showModal({
					content: '是否确认取消该订单？',
					success: (res) => {
						let {
							confirm
						} = res;
						if (confirm) {
							this.$http.post('api/cancel/order', {
								order_sn: this.order_sn,
								cancel_reason: ''
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: '取消成功'
								});
								this.init();
							})
						}
					}
				})
			},
			show() {
				this.$refs.pay.showPopup = true;
			},
			fill(a) {
				return 10 > a ? '0' + (0 | a) : a
			},
			async pay(e) {
				let {
					pay_way,
					pay_type
				} = e;
				let info = await this.$http.post('api/pay/pay', {
					order_sn: this.order_sn,
					pay_way,
					form: 'order',
					open_id: uni.getStorageSync('openid')
				});
				let date = new Date();
				let create_time = date.getFullYear() + '-' + this.fill(Number(date.getMonth()) + 1) + '-' + this.fill(
						date.getDate()) + this.fill(date.getHours()) + ':' + this.fill(date.getMinutes()) + ':' + this
					.fill(date.getDate());

				uni.setStorageSync('order_info', {
					create_time,
					order_sn: this.order_sn,
					pay_type,
					pay_money: this.pay_money
				})
				if (pay_way !== 1) {
					pay(info, pay_way === 4 ? 'wxpay' : 'alipay').then(res => {
						uni.navigateTo({
							url: '/bundle/pages/pay_success/pay_success'
						})
					});
					return;
				} else {
					uni.navigateTo({
						url: '/bundle/pages/pay_success/pay_success'
					})
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	/deep/.u-count-down__text {
		font-size: 32rpx;
		color: white;
		line-height: unset;
	}

	.page {
		padding: 0rpx 32rpx 100rpx;
		background-color: #f8f8f8;
		background-image: linear-gradient(169.4deg,
				rgb(49, 208, 129) 0%,
				rgb(49, 208, 129) -6.14%,
				rgb(24, 181, 103) 111.55%,
				rgb(24, 181, 103) 100%);
		// overflow-y: auto;

		.image {
			margin-left: 16rpx;
			width: 16rpx;
			height: 28rpx;
		}

		.group {
			margin-top: 50rpx;

			.group_1 {
				color: rgb(255, 255, 255);
				font-size: 40rpx;
				line-height: 48rpx;
				white-space: nowrap;

				.image_1 {
					margin: 6rpx 0;
					width: 36rpx;
					height: 36rpx;
				}

				.text {
					margin-left: 16rpx;
				}
			}

			.text_1 {
				margin-top: 12rpx;
				align-self: center;
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}
		}

		.group_2 {
			margin-top: 56rpx;

			// padding-left: 28rpx;
			.steps-text {
				padding-top: 10rpx;
			}

			.group_3 {
				padding: 0 110rpx;
				color: rgb(24, 181, 103);
				font-size: 24rpx;
				line-height: 34rpx;
				white-space: nowrap;

				.left-text-wrapper {
					padding: 6rpx 0 12rpx;
					background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844615701279305.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					height: 52rpx;

					.text_2 {
						margin: 0 12rpx;
					}

					&.select-active {
						// background-image: url('../../static/teps-2.png');

					}
				}

				.view {
					margin-left: 115rpx;
				}
			}

			.view_2 {
				color: rgb(24, 181, 103);
				font-size: 24rpx;
				line-height: 26rpx;
				white-space: nowrap;
			}

			.group_6 {
				color: rgba(255, 255, 255, 0.6);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				.text-active {
					color: rgb(255, 255, 255);
				}

				.text_9 {}
			}

			.text_6 {
				color: rgba(255, 255, 255, 0.6);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;
				margin-left: 30rpx;

				&.text-active {
					color: rgb(255, 255, 255);
				}
			}

			.text_7 {
				margin-left: 66rpx;
				color: rgba(255, 255, 255, 0.6);
				font-size: 28rpx;
				line-height: 40rpx;
				white-space: nowrap;

				&.text-active {
					color: rgb(255, 255, 255);
				}
			}
		}

		.group_7 {
			margin-top: 72rpx;

			.group_8 {
				padding: 0 118rpx;

				.text-wrapper_1 {
					padding: 10rpx 0;
					color: rgb(255, 255, 255);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
					border-radius: 32rpx;
					width: 200rpx;
					height: 64rpx;
					border: solid 2rpx rgb(255, 255, 255);
				}

				.text-wrapper_2 {
					margin-left: 48rpx;
					padding: 12rpx 0;
					color: rgb(24, 181, 103);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
					background-image: linear-gradient(104.7deg,
							rgb(255, 255, 255) 0%,
							rgb(255, 255, 255) -10.51%,
							rgb(183, 255, 219) 114.74%,
							rgb(183, 255, 219) 100%);
					box-shadow: 4rpx 8rpx 12rpx 0px rgb(5, 139, 72);
					border-radius: 32rpx;
					width: 200rpx;
					height: 64rpx;
				}
			}

			.section_4 {
				margin-top: 48rpx;
				padding: 24rpx 22rpx 40rpx 24rpx;
				background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844615594288627.png');
				background-position: 0px 0px;
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.group_14 {
					margin-top: 40rpx;

					.group_16 {
						margin-top: 16rpx;

						.text_21 {
							color: rgb(153, 153, 153);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_22 {
							color: rgb(102, 102, 102);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}
					}

					.text_19 {
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text_20 {
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}
				}

				.group_17 {
					margin-top: 38rpx;
				}

				.group_30 {
					margin-top: 40rpx;

					.text_37 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.text_38 {
						margin: 24rpx 6rpx 0 4rpx;
						color: rgb(102, 102, 102);
						font-size: 24rpx;
						line-height: 34rpx;
						text-align: left;
					}
				}

				.text_39 {
					margin-top: 38rpx;
					align-self: center;
					color: rgb(153, 153, 153);
					font-size: 24rpx;
					line-height: 34rpx;
					white-space: nowrap;
				}

				.text-wrapper_6 {
					margin-top: 38rpx;
					padding: 6rpx 0;
					align-self: center;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
					border-radius: 28rpx;
					width: 176rpx;
					border: solid 2rpx rgb(228, 228, 228);
				}

				.group_10 {
					color: rgb(0, 0, 0);
					font-size: 32rpx;
					font-weight: 500;
					line-height: 44rpx;
					white-space: nowrap;

					.section_5 {
						margin: 6rpx 0;
						background-color: rgb(24, 181, 103);
						border-radius: 4rpx;
						width: 8rpx;
						height: 32rpx;
					}

					.text_12 {
						margin-left: 16rpx;
					}
				}

				.group_11 {
					margin-top: 24rpx;
					border-bottom: 1rpx solid #f5f5f5;

					.section_6 {
						padding-top: 140rpx;
						color: rgb(255, 255, 255);
						font-size: 24rpx;
						line-height: 34rpx;
						white-space: nowrap;
						border-radius: 12rpx;
						// background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844615922897731.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						width: 230rpx;
						height: 196rpx;

						.text-wrapper_3 {
							padding: 10rpx 0 12rpx;
							background-color: rgba(0, 0, 0, 0.36);
							border-radius: 0px 0px 12rpx 12rpx;

							.text_13 {
								margin-left: 14rpx;
								margin-right: 12rpx;
							}
						}
					}

					.group_12 {
						margin-left: 24rpx;
						margin-right: 40rpx;
						flex: 1 1 auto;

						.text_14 {
							color: rgb(0, 0, 0);
							font-size: 32rpx;
							font-weight: 500;
							line-height: 44rpx;
							white-space: nowrap;
						}

						.group_13 {
							margin-top: 8rpx;
							white-space: nowrap;

							.text_15 {
								color: rgb(243, 151, 53);
								font-size: 24rpx;
								line-height: 28rpx;
							}

							.text_16 {
								color: rgb(243, 151, 53);
								font-size: 40rpx;
								line-height: 48rpx;
							}
						}

						.view_6 {
							margin-top: 20rpx;
							color: rgb(102, 102, 102);
							font-size: 24rpx;
							line-height: 34rpx;
							white-space: nowrap;
						}

						.text_18 {
							margin-top: 8rpx;
							color: rgb(153, 153, 153);
							font-size: 24rpx;
							line-height: 34rpx;
							white-space: nowrap;
							margin-left: 340rpx;
						}
					}
				}

				.group_18 {
					padding: 40rpx 0 38rpx;

					.text_29 {
						margin-top: 8rpx;
						color: rgb(102, 102, 102);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.text-wrapper_5 {
						padding: 8rpx 0;
						align-self: center;
						color: rgb(255, 255, 255);
						font-size: 28rpx;
						line-height: 40rpx;
						white-space: nowrap;
						background-color: rgb(24, 181, 103);
						border-radius: 28rpx;
						width: 160rpx;
						height: 56rpx;
					}

					.text_27 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.text_28 {
						margin-left: 16rpx;
						margin-top: 4rpx;
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						white-space: nowrap;
					}

					.group_28 {
						margin-top: 16rpx;

						.text_33 {
							color: rgb(153, 153, 153);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_34 {
							color: rgb(102, 102, 102);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}
					}

					.group_29 {
						margin-top: 16rpx;

						.text_35 {
							color: rgb(153, 153, 153);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}

						.text_36 {
							color: rgb(102, 102, 102);
							font-size: 28rpx;
							line-height: 40rpx;
							white-space: nowrap;
						}
					}

					.image_5 {
						border-radius: 50%;
						width: 80rpx;
						height: 80rpx;
					}

					.group_20 {
						margin-left: 24rpx;

						.group_23 {
							margin-top: 6rpx;
							color: rgb(153, 153, 153);
							font-size: 20rpx;
							line-height: 28rpx;
							white-space: nowrap;

							.image_7 {
								width: 80rpx;
								height: 24rpx;
							}

							.image_8 {
								margin-left: 4rpx;
								width: 52rpx;
								height: 24rpx;
							}

							.text_25 {
								margin-left: 8rpx;
							}
						}

						.text_23 {
							color: rgb(0, 0, 0);
							font-size: 32rpx;
							font-weight: 500;
							line-height: 44rpx;
							white-space: nowrap;
						}

						.group_22 {
							margin: 4rpx 0 4rpx 8rpx;
							padding: 2rpx 0;
							color: rgb(255, 255, 255);
							font-size: 20rpx;
							line-height: 28rpx;
							white-space: nowrap;
							width: 90rpx;
							position: relative;

							.text-wrapper_4 {
								padding: 2rpx 0;
								background-color: rgb(243, 151, 53);
								border-radius: 16rpx;
								width: 78rpx;
							}

							.image_6 {
								border-radius: 50%;
								width: 36rpx;
								height: 36rpx;
								position: absolute;
								left: 0;
								bottom: 0;
							}
						}
					}

					.text_30 {
						color: rgb(0, 0, 0);
						font-size: 32rpx;
						font-weight: 500;
						line-height: 44rpx;
						white-space: nowrap;
					}

					.group_27 {
						white-space: nowrap;
						height: 44rpx;

						.text_31 {
							color: rgb(0, 0, 0);
							font-size: 24rpx;
							font-weight: 500;
							line-height: 34rpx;
						}

						.text_32 {
							color: rgb(0, 0, 0);
							font-size: 32rpx;
							font-weight: 500;
							line-height: 44rpx;
						}
					}
				}

				.divider {
					margin-left: 4rpx;
					background-image: repeating-linear-gradient(90deg,
							rgb(228, 228, 228),
							rgb(228, 228, 228) 1.2618296529968454%,
							transparent 1.2618296529968454%,
							transparent 2.5236593059936907%);
					height: 2rpx;
				}
			}
		}

		.center-group {
			padding: 0 4rpx;

			.section_1 {
				padding: 8rpx 0;
				background-color: rgba(255, 255, 255, 0.45);
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;

				.text-wrapper {
					height: 32rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 50%;
					width: 32rpx;
				}
			}

			.section_2 {
				margin-left: 6rpx;
				align-self: center;
				background-color: rgba(255, 255, 255, 0.45);
				border-radius: 2rpx;
				width: 70rpx;
				height: 4rpx;

			}

			.section_3 {
				margin-left: 14rpx;
				align-self: center;
				background-color: rgba(255, 255, 255, 0.5);
				border-radius: 50%;
				width: 24rpx;
				height: 24rpx;

				&.select-active {
					padding: 8rpx 8rpx;
					width: 48rpx;
					height: 48rpx;
				}

				.text-wrapper {
					height: 32rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 50%;
					width: 32rpx;
				}
			}

			.view_3 {
				margin-left: 10rpx;
			}

			.image_2 {
				margin-left: 10rpx;
				align-self: center;
				width: 178rpx;
				height: 16rpx;
			}

			.image_3 {
				margin-left: 14rpx;
				align-self: center;
				width: 174rpx;
				height: 16rpx;
			}

			.image_4 {
				margin: 6rpx 0 4rpx;
				width: 24rpx;
				height: 24rpx;
			}

			.text_17 {
				margin-left: 8rpx;
			}
		}
	}

	.section_9 {
		// margin-top: 24rpx;
		padding: 22rpx 24rpx;
		background-color: rgb(255, 255, 255);
		border-radius: 24rpx 24rpx 0px 0px;

		.text_29 {
			margin-left: 8rpx;
			color: rgb(0, 0, 0);
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
			white-space: nowrap;
		}

		.text_30 {
			margin-left: 8rpx;
			color: rgb(102, 102, 102);
			font-size: 28rpx;
			line-height: 40rpx;
			white-space: nowrap;
		}
	}

	.section_10 {
		padding: 22rpx 24rpx;
		color: rgb(0, 0, 0);
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		white-space: nowrap;
		background-color: rgb(255, 255, 255);

		.text_31 {
			margin-left: 8rpx;
		}
	}

	.margin_left {
		margin-left: 8rpx;
	}

	.image_0 {
		width: 40rpx;
		height: 40rpx;
	}

	.bottomButton {
		// margin-right: 30rpx;
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #C74BF1 0%, #8538FC 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.select-active {}
</style>